<template>
  <el-steps :active="activeNode" align-center>
    <el-step v-for="(value, key) in processList"
             :key="key"
             :title="value.nodeName"
    >
      <template slot="description">
        <span>{{ value.handler }}<br/>{{ value.handleTime }}</span>
      </template>
    </el-step>
  </el-steps>
</template>

<script>
import { listProcessHistory } from '@/api/activiti/historyFormdata'

export default {
  name: 'ApprovalProcessHistoryChart',
  props: {
    instanceId: {
      required: true,
      type: String
    },
  },
  data() {
    return {
      // 流程列表
      processList: [],
      activeNode: 0
    }
  },
  created() {
    this.init()
  },
  mounted() {

  },
  watch: {
    instanceId() {
      this.init();
    }
  },
  methods: {
    // 初始化方法
    init() {
      const _this = this
      _this.activeNode = 0
      listProcessHistory(_this.instanceId).then(async res => {
        if (res && res.code === 200) {
          _this.processList = res.rows
          await _this.processList.forEach(detail => {
            if (detail && detail.isActiveNode) {
              _this.activeNode+=1
            }
          })
          // 当没有流程未开始或者出现不存在的节点时默认激活第一个开始节点
          if(_this.activeNode === 0) {
            _this.activeNode = 1
          }
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  margin-bottom: 24px;

  .card-head-title {
    display: inline-block;
    padding: 8px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgba(0, 0, 0, .85);
    font-weight: 500;
    font-size: 16px;
  }

  .card-body {
    padding: 12px 14px;

    .tag-text {
      margin-left: 8px;
    }

    .confirm-btn-group {
      display: flex;
      flex-direction: row-reverse;

      .confirm-btn-system {
        margin-right: 14px
      }
    }
  }
}
</style>
